<template>
  <VAceEditor
    v-model:value="text"
    lang="pgsql"
    :theme="$store.getters.getEditorTheme"
    style="height: 100%"
    :readonly="readOnly"
    :options="options"
    @init="editorInit"
  ></VAceEditor>
</template>

<script>
import { debounce, localCache } from '@/utils/common';

export default {
  components: {},
  data() {
    return {
      text: '',
      selectedText: '',
      readOnly: false,
      options: {
        enableSnippets: true,
        enableLiveAutocompletion: true,
        tabSize: 2,
        fontSize: 20,
        showPrintMargin: false, // 去除编辑器里的竖线
      },
    };
  },
  methods: {
    editorInit(editor) {
      editor.getSession().selection.on(
        'changeSelection',
        debounce(() => {
          this.selectedText = editor.getSelectedText();
        }),
      );
      editor.on('change', debounce(this.cacheSql));
    },
    cacheSql() {
      localCache.set('sqlCache', this.text);
    },
  },
  beforeMount() {
    this.text = localCache.get('sqlCache') || '';
  },
};
</script>

<style></style>
